<template>
  <el-card class="activity-details-container">
    <div class="activity-content">
      <h2 class="activity-title">
        {{ activityDetails.activityTitle || "活动标题未填写" }}
      </h2>
      <div class="activity-body">
        {{ activityDetails.activityContent || "活动内容未填写" }}
      </div>
    </div>
    <div class="activity-action-bar" v-if="isShowActionBar">
      <el-button
        v-if="!isParticipant"
        type="primary"
        size="default"
        @click="joinActivity"
      >
        参加活动
      </el-button>
      <el-button v-else type="danger" size="default" @click="leaveActivity">
        退出活动
      </el-button>
    </div>
  </el-card>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import {
  ActivityControllerService,
  type ActivityMembershipQueryRequest,
} from "../../../../../generated";
import { ElMessage } from "element-plus";
import { useUserStore } from "../../../../stores/user";
import USER_ROLE_ENUM from "../../../../access/userRoleEnum";

const route = useRoute();
const userStore = useUserStore();

const activityId = Number(route.query.activityId);
const clubId = ref<number>(0);
const isParticipant = ref(false);
const isShowActionBar = ref(true);

const activityDetails = ref({
  activityId: "",
  activityTitle: "",
  activityContent: "",
});

const loadActivityDetails = async () => {
  try {
    const response =
      await ActivityControllerService.getActivityVoById(activityId);
    if (response.code === 0 && response.data) {
      activityDetails.value = response.data;
      clubId.value = response.data.clubVO?.id as number;
    } else {
      console.error(
        "加载活动详情失败:",
        response.message || "返回数据格式错误",
      );
      ElMessage.error(response.message || "加载活动详情失败，请稍后重试");
    }
  } catch (error) {
    console.error("加载活动详情时发生错误:", error.message || error);
    ElMessage.error("系统错误，请稍后重试");
  }
};

const checkParticipationStatus = async () => {
  console.log(userStore.userRole + "  " + userStore.managedClubId + "  " + clubId.value)
  if (userStore.userRole === USER_ROLE_ENUM.ADMIN) {
    isParticipant.value = true;
    isShowActionBar.value = false;
    return;
  } else if (
    userStore.userRole === USER_ROLE_ENUM.MANAGER &&
    userStore.managedClubId === clubId.value
  ) {
    isParticipant.value = true;
    isShowActionBar.value = false;
    return;
  }
  try {
    const response = await ActivityControllerService.isUserInActivity({
      activityId: activityId,
      userId: userStore.id,
    } as ActivityMembershipQueryRequest);
    if (response.code === 0) {
      isParticipant.value = response.data;
    } else {
      ElMessage.error("无法检查参与状态");
    }
  } catch (error) {
    console.error("检查参与状态时发生错误:", error);
    ElMessage.error("无法检查参与状态");
  }
};

onMounted(async () => {
  await loadActivityDetails();
  await checkParticipationStatus();
});

const joinActivity = () => {
  const url = `/application/add/join-activity?activityId=${activityId}`;
  window.open(url, "_blank");
};

const leaveActivity = () => {
  const url = `/application/add/quit-activity?activityId=${activityId}`;
  window.open(url, "_blank");
};
</script>

<style scoped>
.activity-details-container {
  background: white;
  padding: 20px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.activity-content {
  flex-grow: 1;
  overflow-y: auto;
}

.activity-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}

.activity-body {
  font-size: 16px;
  line-height: 1.6;
  color: #666;
  margin-bottom: 20px;
}

.activity-action-bar {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  padding: 10px 0;
  border-top: 1px solid #eee;
}
</style>
